<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路由5</title>
</head>
<body>
<div id="app">
    <router-link to="/user">user</router-link>
    <router-link to="/dog">狗狗</router-link>
    <router-view></router-view>
</div>

<template id="userTem">
    <div>
        <h3>userCom</h3>
    </div>
</template>
<template id="dogTem">
    <div>
        <h3>dogCom</h3>
        <router-link to="/samo">samo11111</router-link>
        <router-link to="/bite">bite22222</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="samoTem">
    <div>
        <h3>samoCom</h3>
    </div>
</template>
<template id="biteTem">
    <div>
        <h3>biteCom</h3>
    </div>
</template>


<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    let userCom = {
        template: `#userTem`
    }
    let dogCom = {
        template: `#dogTem`
    }
    let samoCom = {
        template: `#samoTem`
    }
    let biteCom = {
        template: `#biteTem`
    }

    const router = new VueRouter({
        routes: [{
            path: `/user`,
            component: userCom
        },
            {
                path: `/dog`,
                component: dogCom,
                children: [{
                    path: `/samo`,
                    component: samoCom
                },
                    {
                        path: `/bite`,
                        component: biteCom
                    }
                ]
            }]
    })
    const APP = new Vue({
        el: `#app`,
        router
    })
</script>
</body>
</html>
